<html>
<div id="show">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <style>
        input:focus {
          box-shadow: 0 0 15px 5px #b0e0ee;
           border: 2px solid #bebede;
         }
         p1{
           font-weight:bold; font-size:26px; color:#81d8d0;margin-left:20px;
         }
         div1{
           font-weight:bold; font-size:26px; color:#81d8d0;margin-left:20px;
         }
</style>
  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/check_textbox.js"></script>
  <script>

  $(document).ready(function(){
    $("#result_head").hide();
    $("#result_t").hide();
  });
  function check_real_time(value,span){
    if(piv(value)){
      $(span).html("True");
    }
    else{
      $(span).html("Wrong Format");
    }
  }
  function on_click(){
    var MerID = $("#Mer_ID").val();
    var item = $("#item").val();
    var txt1000 = $("#txt1000").val();
    var txt500 = $("#txt500").val();
    var txt100 = $("#txt100").val();
    var txt20 = $("#txt20").val();
    var txt10 = $("#txt10").val();
    var txt5 = $("#txt5").val();
    var txt1 = $("#txt1").val();
    if(piv(txt1000) && piv(txt500) && piv(txt100) && piv(txt20) && piv(txt10) && piv(txt5) && piv(txt1) ){
      var total = ((txt1000*1000)+(txt500*500)+(txt100*100)+(txt20*20)+(txt10*10)+(txt5*5)+txt1)-item;
      if(piv(total)){
        //data: {function:'calmoney', MerID: MerID,item:item,total:total} ,
        $.ajax({
          type: "POST",
          url: "calmoney_service.php",
          // The key needs to match your method's input parameter (case-sensitive).
          data: {function:'calmoney', MerID: MerID,item:item,total:total} ,
          //contentType: "application/json; charset=utf-8",
          dataType: "text",
        }
        ).done( function(data){
          var obj = jQuery.parseJSON(data );
          $("#result_t").show();
            $("#torn").html("total torn : "+obj.torn);
            $("#result_head").show();
            $("#piece_1000").html(set_zero(obj.piece_1000));
            $("#piece_500").html(set_zero(obj.piece_500));
            $("#piece_100").html(set_zero(obj.piece_100));
            $("#piece_20").html(set_zero(obj.piece_20));
            $("#piece_10").html(set_zero(obj.piece_10));
            $("#piece_5").html(set_zero(obj.piece_5));
            $("#piece_1").html(set_zero(obj.piece_1));
          });
      }
      else{
        alert('May por');
        $("#torn").html("");
        $("#result_head").hide();
        $("#result_t").hide();
        $("#piece_1000").html("");
        $("#piece_500").html("");
        $("#piece_100").html("");
        $("#piece_20").html("");
        $("#piece_10").html("");
        $("#piece_5").html("");
        $("#piece_1").html("");

      }
    }
    else{
      alert('Wrong format');
      $("#result_t").hide();
      $("#torn").html("");
      $("#result_head").hide();
      $("#piece_1000").html("");
      $("#piece_500").html("");
      $("#piece_100").html("");
      $("#piece_20").html("");
      $("#piece_10").html("");
      $("#piece_5").html("");
      $("#piece_1").html("");
      }

  }
  function set_zero(data){
    if(data == null){
      return 0;
    }
    else{
      return data;
    }
  }
  </script>
  <?php
    include "connectDB.php";
    include "check_textbox.php";
    $strSQL = "SELECT * FROM tbl_item WHERE mer_id = '".$_GET[MerID]."' ";
    $objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
    $mer_id = $_GET[MerID];
  ?>
  <title>Welcome to Vending Sale.</title>
</head>
<body>
<p style="font-weight:bold; font-size:32px; color:#009688;margin-left:15px;">Juice Merchant</p>


<input type="hidden" id="Mer_ID" name="Mer_ID" value="<?php echo htmlentities($mer_id); ?>"></input>
<form name="form1" action="payresult.php" method="post"  >
 <br>
 <br>

 <p style="font-weight:bold; font-size:28px; color:#89bc84;margin-left:35px;">
<select name="item" id="item"></p>
 <?php
 while ($objResult = mysql_fetch_array($objQuery))
 {
   $variable1 = $objResult["item_name"];
   $variable2 = $objResult["price"];
   echo "<OPTION VALUE=\"$variable2\">".$variable1." : ".$variable2."</option>";
 ?>
<?php
 }
?>
</select>

<br>
<br>
<p style="font-weight:bold; font-size:32px; color:#009688;margin-left:15px;">Payment <br />
<br>
<table width="50%">
<tr>
  <td><p1>B 1000 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_1)" id="txt1000" name="txt1000" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_1"></span></td>
</tr>
<tr>
  <td><p1>B 500 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_2)" id="txt500" name="txt500" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_2"></span></td>
</tr>
<tr>
  <td><p1>B 100 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_3)" id="txt100" name="txt100" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_3"></span></td>
</tr>
<tr>
  <td><p1>B 20 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_4)" id="txt20" name="txt20" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_4"></span></td>
</tr>
<tr>
  <td><p1>B 10 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_5)" id="txt10" name="txt10" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_5"></span></td>
</tr>
<tr>
  <td><p1>B 5 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_6)" id="txt5" name="txt5" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_6"></span></td>
</tr>
<tr>
  <td><p1>B 1 : Qty </p></td>
  <td><p1><input type="text" onkeyup="check_real_time(this.value,alert_7)" id="txt1" name="txt1" size="3" maxlength="8"/></p1></td>
  <td><p1>ea.</p1></td>
  <td><span style="color:pink" id="alert_7"></span></td>
</tr>
</table>



<!--<input type="submit" value="submit" name="submit" >-->
</form>
<input style="margin-left:20px;" type="button" value="submit" id="button" onclick="on_click()" name="button"/ ><br/><br/>
<p style="font-weight:bold; font-size:32px; color:#009688;margin-left:15px;" id="result_head"> ..Cal Money..  <br />

<table id="result_t" width="50%">
  <tr>
    <td><p1>total 1000 >></p1></td>
    <td><div1 id="piece_1000"></div1></td>
  </tr>
  <tr>
    <td><p1>total 500 >></p1></td>
    <td><div1 id="piece_500"></div1></td>
  </tr>
  <tr>
    <td><p1>total 100 >></p1></td>
    <td><div1 id="piece_100"></div1></td>
  </tr>
  <tr>
    <td><p1>total 20 >></p1></td>
    <td><div1 id="piece_20"></div1></td>
  </tr>
  <tr>
    <td><p1>total 10 >></p1></td>
    <td><div1 id="piece_10"></div1></td>
  </tr>
  <tr>
    <td><p1>total 5 >></p1></td>
    <td><div1 id="piece_5"></div1></td>
  </tr>
  <tr>
    <td><p1>total 1>></p1></td>
    <td><div1 id="piece_1"></div1></td>
  </tr>
</table>
<div style="font-weight:bold; font-size:26px; color:#ff6569;margin-left:20px;" id="torn"></div>

</body>
</div>
</html>
